import ClTable from "@/components/ClTable"
import FieldSet from "@/components/FieldSet"
import { ColumnsType } from "antd/es/table";
import styles from './index.module.scss'

interface DataType {
  key: React.Key;
  name: string;
  age: number;
  address: string;
}

const TableDemo = () => {

  const columns: ColumnsType<DataType> = [
    {
      title: 'Name',
      dataIndex: 'name',
    },
    {
      title: 'Age',
      dataIndex: 'age',
    },
    {
      title: 'Address',
      dataIndex: 'address',
    },
  ];

  function createTableData() {
    const data = [];
    for (let i = 0; i < 46; i++) {
      data.push({
        key: i,
        name: `Edward King ${i}`,
        age: 32,
        address: `London, Park Lane no. ${i}`,
      });
    }
    return data
  }

  return (
    <div>
      <FieldSet title="表格示例" />
      <div className={styles.TableBody}>
        <ClTable 
        columns={columns}
        dataSource={createTableData()}
        />
      </div>
    </div>
  )
}

export default TableDemo